<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志列表</title>
    <!--<link rel="stylesheet" href="../css/eui.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 1200px">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="请求类型">
                        <span>{{ props.row.type }}</span>
                    </el-form-item>
                    <el-form-item label="请求地址">
                        <span>{{ props.row.host }}</span>
                    </el-form-item>
                    <el-form-item label="响应类型">
                        <span>{{ props.row.accept }}</span>
                    </el-form-item>
                    <el-form-item label="请求参数">
                        <span>{{ props.row.parameter }}</span>
                    </el-form-item>
                    <el-form-item label="请求状态码">
                        <span>{{ props.row.state }}</span>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <span>{{ props.row.start_time }}</span>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <span>{{ props.row.end_time }}</span>
                    </el-form-item>
                    <el-form-item label="请求耗时">
                        <span>{{ props.row.run_time }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column
                label="请求类型"
                prop="type">
        </el-table-column>
        <el-table-column
                label="请求地址"
                prop="host">
        </el-table-column>
        <el-table-column
                label="请求结果"
                prop="state">
        </el-table-column>
        <el-table-column
                label="开始时间"
                prop="start_time">
        </el-table-column>
        <el-table-column
                label="结束时间"
                prop="end_time">
        </el-table-column>
    </el-table>
    <el-button-group>
        <el-button @click="cxlast()">上一页</el-button>
        <el-button @click="cxnext()">下一页</el-button>
        <el-button @click="fh()">返回发送页面</el-button>
    </el-button-group>
</div>
</body>
<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<script src="../js/vue.js"></script>
<script src="../js/eui.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                pg:1,
                pageSize:4,
                count:0,
                permission:"",
            }
        },
        created:function(){
            //向数据库发送请求获取日志信息
            this.cx();
        },
        methods:{
            cxlast(){
                if(v.pg-1<=0){
                    alert("已经是第一页!!");
                    return;
                }
                v.pg = v.pg-1;
                this.cx();
            },
            cxnext(){
                if(v.pg+1>v.count){
                    alert("已经是最后一页!!");
                    return;
                }
                v.pg = v.pg+1;
                this.cx();
            },
            fh(){
                location.href="/demo/request/fsqq";
            },
            cx:function (){
                //v.pg = n!=undefined&&n!=null?n:1;
                console.log(this.pg);
                axios.get("/demo/request/cxrz?pg="+this.pg).then(function (response) {
                    v.tableData=response.data.data.data;
                    v.pg = response.data.data.currentPage;
                    v.count = response.data.data.pageSize;
                    console.log(v);
                });
            },
        }
    })
</script>
</html>